<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>TEAM</title>
	<link rel="stylesheet" href="style.css">

</head>
<body onselectstart="return false;">
	<!--改写，为模版字符串-->
	<div class="wrap" id="wrap">
	<!--photo 负责旋转平移-->
		<div class="photo photo_front" onclick="turn(this)" id="photo_{{index}}">
			<!--photo 负责翻转-->
			<div class="photo-wrap">
				<div class="side side-front">
					<p class="image"><img src="photo/{{img}}" alt=""></p>
					<p class="title">{{title}}</p>
				</div>
				<div class="side side-back">
					<p class="desc">{{desc}}</p>
				</div>
			</div>
		</div>

	</div>
	<audio controls="controls" hidden="hidden" autoplay="autoplay" loop="loop">

	  <source src="music.mp3" type="audio/mpeg" />
	</audio>
	<!-- JiaThis Button BEGIN -->
	<!-- <div id="ckepop"> -->
		<!-- <button @click="clear()">清楚自动轮播</button>	  -->
	<!-- </div>  -->
<!-- JiaThis Button END -->

	<script type="text/javascript" src="photo/data.js"></script>
	<script type="text/javascript">
	    // 1、翻面控制
		function turn( elem ){
			var cls=elem.className;
			var n=elem.id.split('_')[1];
			if( /photo-center/.test( cls ) ){
				
			}else{
				return rsort(n);
			}

			if( /photo_front/.test( cls ) ){
				cls=cls.replace(/photo_front/,'photo_back');
				g('#nav_'+n).className += ' i_back ';

			}
			else{
				cls=cls.replace(/photo_back/,'photo_front');
				g('#nav_'+n).className = g('#nav_'+n).className.replace(/\s*i_back\s*/,' ');
				
			}
			return elem.className=cls;

		}
		// 3、通用函数
		function g(selector){
			var method = selector.substr(0,1) == '.'?'getElementsByClassName':'getElementById';
			return document[method](selector.substr(1));
		}

		var data = data;
		function addPhoto(){
			var template=g('#wrap').innerHTML;
			var html=[];
			var nav=[];
			for( s in data ){
				var _html=template
							.replace('{{index}}',s)
							.replace('{{img}}',data[s].img)
							.replace('{{title}}',data[s].title)
							.replace('{{desc}}',data[s].desc);
				html.push(_html);

				nav.push('<span id="nav_'+s+'" onclick="turn( g(\'#photo_'+s+'\') )" class="i">&nbsp;</span>');

			}
			html.push('<div class="nav">'+nav.join('')+'</div>');

			g('#wrap').innerHTML = html.join('');

			rsort( random( [0,data.length-1] ) );

		}
		

		function rsort( n ){

			var _photo=g('.photo');
			var photos=[];
			for( s=0; s <= _photo.length-1;s++ ){
				_photo[s].className=_photo[s].className.replace(
					/\s*photo-center\s*/,' ');

				_photo[s].className=_photo[s].className.replace(
					/\s*photo_front\s*/,' ');

				_photo[s].className=_photo[s].className.replace(
					/\s*photo_back\s*/,' ');

				_photo[s].className += ' photo_front';
				_photo[s].style.left='';
				_photo[s].style.top='';
				// _photo[s].style.z-index='999';
				_photo[s].style['-webkit-transform'] = 'rotate(360deg) scale(1.1)';

				photos.push( _photo[s] );

			}

			var photo_center = g('#photo_'+n);
			photo_center.className += ' photo-center';

			photo_center=photos.splice(n,1)[0];

			// console.log(photos.length);
			var photos_left=photos.splice(0,Math.ceil(photos.length/2) );
			var photos_right=photos;

			var ranges=range();
			for( s in photos_left ){
				var photo=photos_left[s];
				photo.style.left= random(ranges.left.x)+'px';
				photo.style.top= random(ranges.left.y)+'px';

				photo.style['-webkit-transform']='rotate('+random([-150,150])+'deg) scale(1)';

			}
			for( s in photos_right ){
				var photo=photos_right[s];
				photo.style.left= random(ranges.right.x)+'px';
				photo.style.top= random(ranges.right.y)+'px';

				photo.style['-webkit-transform']='rotate('+random([-150,150])+'deg) scale(1)';
			}
			//控制按钮处理
			var navs =g ('.i');
			for( s=0;s<navs.length;s++){
				navs[s].className = navs[s].className.replace(/\s*i_current\s*/,' ');
				navs[s].className = navs[s].className.replace(/\s*i_back\s*/,' ');
			}
			var current=g('#nav_'+n);
			current.className += ' i_current ';
		}

		function random( range ){

			var max=Math.max( range[0], range[1] );
			var min=Math.min( range[0], range[1] );
			var diff=max-min;
			var number=	Math.ceil( (Math.random()*diff + min) );
			return number;

		}

		function range(){
			var range={
				left:{ x:[],y:[] },
				right:{ x:[],y:[] }
			}
			var wrap={
				w:g('#wrap').clientWidth,
				h:g('#wrap').clientHeight,
			}
			var photo={
				w:g('.photo')[0].clientWidth,
				h:g('.photo')[0].clientHeight,
			}
			range.wrap=wrap;
			range.photo=photo;
			range.left.x=[0-photo.w,wrap.w/2-photo.w/2];
			range.left.y=[0-photo.h,wrap.h];
			range.right.x=[wrap.w/2+photo.w/2,wrap.w+photo.w];
			range.right.y=range.left.y;

			return range;
		}
		init()
		function init () {
			addPhoto()
			var n = 0
			window.setInterval(function(){
				n++
				if(n>26){
					return 
				}
				rsort( n )
			},2000)

		}
			
	</script>
</body>
</html>